<template>
  <div style="width: 100%;height:100vh;overflow:hidden;">
    <div style="width:100%;text-align:center">
        <div style="margin-top:40px;">
            <el-avatar :src="src" :size="100" title="管理员"></el-avatar>
        </div>
    </div>
    <div style="width: 100%;text-align:center;margin-top:60px;display:flex;margin-left:20%">
        <div style="width: 150px;">
            <a href="#">
                <i class="el-icon-office-building" style="color:rgb(125, 95, 173)"></i><br>
                <el-popover
                    placement="bottom-start"
                    title="学历"
                    width="100"
                    trigger="hover"
                    content="本科/遵义医科大学">
                    <el-button type="text" slot="reference">学历</el-button>
                </el-popover>
            </a>
        </div>
        <div style="width: 150px;">
            <a href="#">
                <i class="el-icon-star-off" style="color:rgb(144, 173, 95)"></i><br>
                <el-popover
                    placement="bottom-start"
                    title="年龄"
                    width="100"
                    trigger="hover"
                    content="21岁">
                    <el-button type="text" slot="reference">年龄</el-button>
                </el-popover>
            </a>
        </div>
        <div style="width: 150px;">
            <a href="#">
                <i class="el-icon-guide" style="color:rgb(173, 146, 95)"></i><br>
                <el-popover
                    placement="bottom-start"
                    title="坐标"
                    width="100"
                    trigger="hover"
                    content="地球村/中国/贵州/遵义">
                    <el-button type="text" slot="reference">坐标</el-button>
                </el-popover>
            </a>

        </div>
        <div style="width: 150px;">
           <a href="#">
                <i class="el-icon-mobile-phone" style="color:rgb(173, 118, 95)"></i><br>
                <el-popover
                    placement="bottom-start"
                    title="联系方式"
                    width="210"
                    trigger="hover"
                    content="Email/19923807615@163.comQQ/5174812">
                    <el-button type="text" slot="reference">联系方式</el-button>
                </el-popover>
           </a> 
        </div>
    </div>
    <div style="width: 60%;text-align:center;margin-top:30px;color:#414040;font-size:20px;margin-left:20%">
        你好！我是来自遵义的一枚小程序员。制作该blog的主要就是为了完成毕业设计，当然也是为了分析自己再Java学习方面的
        相关学习经历或者笔记。希望各位读者也能持之以恒、不放弃！！
    </div>
  </div>
</template>

<script>
export default {
    name:'Forme',
    data(){
        return{
            src:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        }
    },
}
</script>
<style scoped>
i{
    border: 1px #95b064 solid;
    border-radius: 140px 140px;
    width:100px;
    height:100px;
    font-size: 60px;
    line-height: 100px;
}
</style>